<template>
  <div class="box">
    <!-- 冲击之刃 -->
    <div id="yL">
      <img src="21.jpg" alt="" />
    </div>
    <!-- 冲击之刃2022 -->
    <div class="chongji">
      <div class="Top">冲击之刃2022</div>
      <div class="Bottom">
        <div class="zuo">
          <span class="iconfont icon-ziyuan1">活动时间:长期</span>
        </div>
        <div class="you"><span class="iconfont icon-dianzan"></span>12</div>
      </div>
    </div>
    <!-- 三分天下 -->
    <div class="cOm">
      <div class="one">
        <img src="22.jpg" alt="" />
      </div>
      <div class="two">
        <img src="23.jpg" alt="" />
      </div>
      <div class="three">
        <img src="24.jpg" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.box{
  width: 3.5rem;
  margin:  0 auto;
}
#yL {
  width: 100%;
  height: 2rem;
}
#yL img {
  width: 100%;
  height: 2rem;
}
/* 冲击之刃 */
.chongji {
  width: 100%;
  height: 0.5rem;
  /* background-color: rgb(35, 148, 148); */
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.Top {
  width: 100%;
  height: 0.2rem;
  /* background-color: blueviolet; */
  margin-bottom: 0.1rem;
  font-size: 0.2rem;
  line-height: 0.2rem;
  font-weight: 700;
}
.Bottom {
  width: 100%;
  height: 0.2rem;
  /* background-color: chartreuse; */
  display: flex;
  justify-content: space-between;
}
.zuo {
  height: 0.2rem;
}
.you {
  height: 0.2rem;
}
.cOm {
  width: 100%;
  height: 0.7rem;
  display: flex;
  justify-content: space-between;
  margin-top: 00.1rem;
}
.one {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  margin-left: -0.2rem;
}
.two {
  width: 100%;
  height: 100%;
  background-color: blue;
 
}
.three {
  width: 100%;
  height: 100%;
  background-color: rgb(42, 187, 192);
}
.one img {
  width: 100%;
  height: 100%;
}
.two img {
  width: 100%;
  height: 100%;
}
.three img {
  width: 100%;
  height: 100%;
}
</style>